<template>
    <div class="flex-container">
        <div class="item" v-for="item in 7">{{ item }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() { },
    methods: {},
}
</script>

<style scoped>
.flex-container {
    background-color: antiquewhite;
    height: 200px;
    display: flex;
    flex-flow: row wrap;

    /* stretch|center|flex-start|flex-end|space-between|space-around */

    /* justify-content  设置 【弹性盒 子元素】 在主轴（横轴）方向上的对齐方式。 */
    /* justify-content: space-around; */
    /* align-items  设置 【弹性盒 子元素】 在侧轴（纵轴）方向上的对齐方式。 */
    /* align-items: flex-end; */

    /* align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,
       但它不是设置弹性子元素的对齐，而是设置各个行的对齐。 */
    /* align-content: space-around; */
}

.item {
    width: 100px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 2px solid salmon;
    margin: 5px;
}
</style>